<template>
  <div style="width: 100%; height: 100%" ref="echarts"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'EchartsComponents',
  props: {
    // 判断是否为折线图或者柱状图
    isAxisChart: {
      type: Boolean,
      default: true,
    },
    //传入的数据
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        };
      },
    },
  },
  data() {
    return {
      // 折线图或柱状图配置项
      axisOption: {
        //图列文字颜色
        textStyle: {
          color: '#333',
        },
        grid: {
          left: '15%',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            //x轴样式
            show: true,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#00c7ff',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              //y轴样式
              show: true,
              lineStyle: {
                color: '#00c7ff',
                width: 1,
                type: 'solid',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              //格线样式
              lineStyle: {
                color: '#00c7ff',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#00c7ff',
              },
            },
          },
        ],
        color: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
        ],
        series: [],
      },
      //饼状图配置项
      normalOption: {
        tooltip: {
          trigger: 'item',
        },
        color: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
        ],
        series: [],
      },
      //存储Echarts dom实例
      echartDom: null,
    };
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
  },
  methods: {
    drawChart() {
      this.drawChartData();
      if (this.echartDom) {
        this.echartDom.setOption(this.options);
      } else {
        this.echartDom = echarts.init(this.$refs.echarts); // 基于准备好的dom，初始化echarts实例
        this.echartDom.setOption(this.options); // 绘制图表
      }
    },
    //赋值
    drawChartData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else {
        this.normalOption.series = this.chartData.series;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart();
    });
  },
};
</script>

<style scoped></style>
